<template>
  <ul class="ul-wrapper">
    <!-- 包裹层-->
    <li v-for="(item, index) in allData" :key="index">
      <!-- 遍历-->
      <div>
        <!-- 是否展开图标-->
        <span class="icon" v-show="item.children" @click="changeStatus(index)">
          <lm-icon :name="icon"></lm-icon>
        </span>
        <!-- CheckBox-->
        <input
          type="checkbox"
          :name="item.label"
          @click="clickBox(item, index)"
          v-model="item.check"
          :disabled="item.disabled || false"
        />
        <!-- checkBox(item) -->
        <div class="checkbox-title" @click="changeStatus(index)">
          {{ item.label }}
        </div>

        <!-- CheckBox内容-->
      </div>
      <!-- 遍历children-->
      <lm-tree v-if="scopesDefault[index]" :allData="item.children" @change="change"></lm-tree>
    </li>
  </ul>
</template>

<script>
export default {
  name: "LmTree",
  props: {
    allData: {
      type: Array,
      default: () => [],
    },
    icon: {
      type: String,
      default: "caret-right",
    },
    value: {
      // 选中的值
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      scopesDefault: [],
      scopes: [],
      node: [],
      flatTreeMenu: [],
      check: "",
      flatTree: [],
      allList: [],
    };
  },
  mounted() {
    this.scope();
  },
  methods: {
    change(e){
      console.log(e,'eeeeeeeeeeee')
    },
    //展开子选项
    scope() {
      this.allData.forEach((item, index) => {
        this.scopesDefault[index] = false;
        if ("children" in item) {
          this.scopes[index] = true;
        } else {
          this.scopes[index] = false;
        }
      });
    },
    // 改变展开状态
    changeStatus(index) {
      // debugger
      if (this.scopesDefault[index] == true) {
        this.$set(this.scopesDefault, index, false);
      } else {
        this.$set(this.scopesDefault, index, this.scopes[index]);
      }
    },
    // 递归处理子数据
    recursiveData(item, arr = []) {
      // 记录点击的label数组
      arr.push(item.label);
      if (item.children) {
        item.children.forEach((element, index) => {
          element.check = element.check === undefined ? false : !element.check;
          this.recursiveData(element, arr);
        });
      }
      return { arr, all: item };
    },
    // 点击选中或取消选中
    clickBox(item, index) {
      let nodes = this.value;
      let { arr, all } = this.recursiveData(item);
      item.check = item.check === undefined ? false : !item.check;
      if (item.check) {
        // 选中
        this.$emit("input", [...nodes, ...arr]);
      } else {
        // 不选中
        arr.forEach((element) => {
          if (nodes.includes(element)) {
            // 包含就过滤数据
            nodes.forEach((n, i) => {
              if (n === element) {
                nodes.splice(i, 1);
              }
            });
          }
        });
        this.$emit("input", nodes);
      }
      let allData = this.allData
      allData[index] = item;
      console.log(allData[index])
      this.$emit("change",allData)
    },
    //将tree树形数据转换为平行数据
    transformData(tree) {
      tree.forEach((item) => {
        this.flatTree.push(item.label);
        item.children && item.children.length > 0
          ? this.transformData(item.children)
          : "";
      });
    },
    selectnode(node) {
      // let arr = this.value;
      // if (node.check) {
      //   // 增加
      //   if (!arr.includes(node.label)) {
      //     arr.push(node.label);
      //   }
      // } else {
      //   // 删除
      //   arr = this.value.filter((item) => {
      //     return item.label !== node.label;
      //   });
      // }
      // this.$emit("input", arr);
    },
  },
  watch: {
    // node: {
    //   handler(val) {
    //     this.selectnode(val);
    //   },
    //   immediate: true,
    // },
    // check: {
    //   handler(val) {
    //     this.selectnode(this.node);
    //   },
    //   immediate: true,
    // },
    allData: {
      handler(val) {
        // console.log(val, "allData");
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.ul-wrapper {
  box-sizing: border-box;
  margin: 10px 30px 0;
  list-style: none;
} // ul包裹层，每层需要向右偏移30px

.checkbox-title,
.icon {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.icon {
  // margin-left: -20px;
  height: 18px;
  width: 18px;
}

input[type="checkbox"] {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  // margin-right: 5px;
  height: 18px;
  width: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
} // CheckBox样式修改

input[type="checkbox"]:checked::before {
  position: absolute;
  top: 0;
  left: 0;
  // padding-left: 2px;
  content: "\2713";
  height: 18px;
  width: 18px;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: bold;
  background: #1296db;
  border: none !important;
  color: #fff;
  border-radius: 3px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
} // CheckBox选中状态时样式修改

input[type="checkbox"]:disabled::before {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 2px;
  content: "";
  height: 18px;
  width: 18px;
  font-size: 12px;
  font-weight: bold;
  background: #ccc;
  color: #fff;
  border-radius: 3px;
  border: 0;
  cursor: no-drop;
} // CheckBox禁用状态时样式修改
</style>